<template>
  <div class="index-group-box">
    <!-- 卡⽚ -->
    <ul class="index-group-boxIn" ref="groupBoxRef">
      <li v-for="item in groupInfo.navList" 
        :key="item.id" 
        @click="channelJump(item)" 
        ref="groupCardRef" 
        class="group-card"
        :class="{ active: isAction(item) }"
        v-show="item.isShow"
        >
        <div class="navlist-item-text">
          <i v-if="item.icon" :class="item.icon" style="font-size: 16px"></i>
          <span>{{ item.navTitle }}</span>
          <div class="underline" v-if="isAction(item)"></div>
        </div>
      </li>
    </ul>
    <!-- 右边滑动箭头 -->
    <div class="scrollX" v-if="arrowShow">
      <i class="el-icon-arrow-left arrowStyle arrowLeft" :class="{arrowInactive:direction =='right',arrowDefault:direction =='left'||direction =='center'}" @click="groupScroll('left')"></i>
      <i class="el-icon-arrow-right arrowStyle arrowRight" :class="{arrowInactive:direction =='left',arrowDefault:direction =='right'||direction =='center'}" @click="groupScroll('right')"></i>
    </div>
  </div>
</template>
<script>
export default {
  props:['groupInfo'],
  name:'scrollTo',
  data() {
    return {
      direction: "right",
      arrowShow: false,
      groupBoxRef: this.$refs.groupBoxRef,
      groupCardRef: this.$refs.groupCardRef,
      scrollPosition: {
        left: 0,
        top: 0
      },
      timer: false,
      screenWidth: document.body.clientWidth,
    };
  },
  computed: {
    
  },
  created() {
    // 监听窗⼝变化事件，判断arrow的展示
  },
  mounted() {
    window.addEventListener("resize", () => {
        this.screenWidth = document.body.clientWidth;
    });
    //window.addEventListener("resize", this.checkArrowShow(), true);
    this.$refs.groupBoxRef.addEventListener(
      "scroll",
      this.handleScroll(this.$refs.groupBoxRef),
      true
    );
    this.checkArrowShow();
  },
  watch: {
    screenWidth: {
      immediate: true,
      handler: function(newVal) {
     // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          this.screenWidth = newVal;
          this.timer = true;
          let _this = this;
          setTimeout(() => {
             //在这里做有关浏览器变化时需要做的操作
             this.checkArrowShow();
            _this.timer = false;
          }, 400);
        }
      }
    }
  },
  methods: {
    //判断是否启用
    isAction(item) {
      let routerPathArr = this.groupInfo.activeChanel.split("/");
      if (routerPathArr.length > 2) {
        //当路由的有二级及一下菜单时
        let newArr = "/" + routerPathArr[1] + "/" + routerPathArr[2];
        return item.path == newArr || item.name == newArr || item.url == newArr;
      } else {
        return (
          item.path == this.groupInfo.activeChanel ||
          item.name == this.groupInfo.activeChanel ||
          item.url == this.groupInfo.activeChanel
        );
      }
    },
    channelJump(item){
      this.$emit('channelJump',item)
    },
    // 获取卡⽚宽度，第⼀个参数是卡⽚个数，默认是整个数组，第⼆个参数是剩余的margin
    getWidth(num, restMargin) {
      // 如果没有内容就返回0
      if (!this.$refs.groupCardRef) return 0;
      return num * (this.$refs.groupCardRef[0].offsetWidth + 25) - restMargin;
    },
    changeArrow(val) {
      // 默认获取scoll部分整个宽度
      let getScrollWidth = this.getWidth(this.groupInfo.navList.length, 0);
      // 获取剩余宽度
      let restWidth = getScrollWidth - val;
      if (restWidth <= this.$refs.groupBoxRef.offsetWidth) {
        this.direction = "left";
      } else if (val === 0) {
        this.direction = "right";
      }else if(restWidth > this.$refs.groupBoxRef.offsetWidth){
        this.direction = "center";
      }
    },
    groupScroll(val) {
      // 获取滚动宽度
      const getMoveWidth = this.getWidth(3, 0);
      if (val === "right") {
        if(this.direction =='left'){
          return
        }
        this.$refs.groupBoxRef.scrollLeft += getMoveWidth;
      } else {
        if(this.direction =='right'){
          return
        }
        this.$refs.groupBoxRef.scrollLeft -= getMoveWidth;
      }
      // 滚动需要时间才能获取最新的距离
      setTimeout(() => {
        this.changeArrow(this.$refs.groupBoxRef.scrollLeft);
      }, 500);
    },
    checkArrowShow() {
      this.arrowShow =
        this.getWidth(this.groupInfo.navList.length, 0) > this.$refs.groupBoxRef.offsetWidth
          ? true
          : false;
    },
    watchEffect() {
      this.checkArrowShow();
    },
    handleScroll(e) {
      this.scrollPosition.left = e.scrollLeft;
      this.scrollPosition.top = e.scrollTop;
      this.changeArrow(this.scrollPosition.left);
    }
  }
};
</script>
<style scoped>
.index-group-box {
  padding-right: 16px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}
.scrollX {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index-group-boxIn {
  width: calc(100% - 96px);
  display: flex;
  scroll-behavior: smooth;
  white-space: nowrap;
  overflow-x: auto;
  flex: none;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.index-group-boxIn::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.group-card {
  box-sizing: border-box;
  min-width: 80px;
  height: 48px;
  line-height: 48px;
  border-radius: 4px;
  margin: 0 10px;
  cursor: pointer;
  flex: none;
}
.index-group-boxIn .active {
  font-weight: 500;
  color:#0D60B4;
  /* border-bottom: 4px solid #fff; */
}
.group-card:hover {
  color:#0D60B4;
  font-weight: 500;
}
.group-card .navlist-item-text {
  position: relative;
  display: inline-block;
}
.group-card .underline {
  height: 2px;
  width: 100%;
  background-color: #0D60B4;
  border-radius: 2px;
  position: absolute;
  bottom: 0px;
}


.group-card:nth-last-of-type(1) {
  margin-right: 5px;
}
.arrowStyle{
  line-height: 48px;
  width: 48px;
  height: 48px;
  color: #666666;
}
.arrowLeft{
  border-radius: 8px 0px 0px 8px;
}
.arrowRight{
  border-radius: 0px 8px 8px 0px;
}
.arrowStyle:hover{
  color: #0D60B4;
  font-weight: 600;
  background-color: #FFEBFF;
}
.arrowInactive{
  color:#cccccc ;
  cursor:not-allowed;
}
.arrowDefault{
  cursor: pointer;
  color: #666666;
}

</style>
